import { useEffect, useState } from "react"
import { useSearchParams } from "react-router"
import type { Issue } from "../types/issue"
import { reqGetIssueByPage } from "../api/issue"
import { Title } from "../components/Title"
import { IssueCard } from "../components/issueCard"
import { Empty, Pagination } from "antd"

export const Search = () => {
    const [searchParams] = useSearchParams()
    const type = searchParams.get("type")
    const [list, setList] = useState<Issue[]>([])
    const value = searchParams.get("value")
    const [nowP, setNowP] = useState(1)
    const [total, setTotal] = useState(0)
    const getList = async () => {
        if(type === "issue"){
            const {
                data: {list,total},
            } = await reqGetIssueByPage({
                page: nowP,
                size: 5,
                searchValue: value!,
            })
            setTotal(total)
            setList(list)
        }
    }
    useEffect(() => {
        setNowP(1)
        getList()
        console.log("11111");
    },[value,type])
    useEffect(()=>{
        getList()
    },[nowP])
    if(type === "issue"){
        return (
            <>
                <Title title="搜索结果"></Title>
                {list.length > 0 ? (
                    <>
                    {list.map((item) => (
                    <IssueCard {...item} key={item._id}></IssueCard>
                    ))}
                    <Pagination
                    align="center"
                    current={nowP}
                    total={total}
                    pageSize={5}
                    onChange={(e) => setNowP(e)}
                    ></Pagination>
                    </>
                ) : (
                    <Empty description={"暂无搜索结果"}></Empty>
                )}
            </>
        )
    }else{
        ;<>
            <Title title="搜索结果"></Title>
        </>
    }
}